<!-- 参考自：https://codepen.io/Cheezily/details/wWmmvP -->
<template>
  <div>
    <div class='container'>
      <div class='items'>
        <div class="item" v-for="item in props.listContent">{{ item }}</div>
      </div>
      <!-- <div class="shadowLayer"></div> -->
    </div>
  </div>
</template>

<script setup>
import { onUpdated, ref, reactive } from 'vue'

const props = defineProps({
  listContent: {
    type: Array,
    default: () => []
  }
})
//预留配置口
const data = reactive({
  fontSize: '25px',
  scrollHeigth: '-90vh',
  // animation: 'scroll 5s infinite linear',
  // animation: {'animation-duration':'5s', 'animation-timing-function':'linear', 'animation-iteration-count': 'infinite',  'animation-name':'scroll'},
  animation: {
    animationDuration: '15s',
    animationTimingFunction: 'linear',
    animationIterationCount: 'infinite',
    animationName: 'scroll'
  },
})
onUpdated(() => {
  //内容比较短的时候，就不滚动了
  if (props.listContent.length * 100 <= window.innerHeight) {
    data.animation.animationDuration = 0;
    data.scrollHeigth = 0;
    return;
  }
  data.scrollHeigth = props.listContent.legth == 0 ? '-90vh' : ('-' + props.listContent.length * 100 + 'px');
  data.animation.animationDuration = props.listContent.legth == 0 ? '5s' : (props.listContent.length + 's');
  // console.log(data.animation.animationDuration);
})

</script>

<style scoped>
/* body {
  background: skyblue;
  font-family: sans-serif;
  overflow-y: hidden;
} */

.container {
  /* width: 960px; */
  height: 90vh;
  margin: 30px auto;
  background: none;
  text-align: left;
}

.leftSideStuff {
  box-sizing: border-box;
  padding: 20px;
  float: left;
  background: white;
  width: 520px;
  height: 100%;
  box-shadow: 0px 5px 8px #000;
}

.items {
  background: none;
  width: 400px;
  height: 90vh;
  /* float: right; */
  margin-right: 40px;
  line-height: 100px;
  z-index: -1;
  overflow-x: hidden;
  overflow-y: hidden;
  text-align: left;
}

.items::after {
  clear: both;
}

.items:hover {
  width: 440px;
  margin-right: 0;
}

.items:hover>.item {
  animation-play-state: paused;
  -webkit-animation-play-state: paused;
  /* Safari 和 Chrome */
  /* color: blue; */
  /* animation: scroll 15s infinite linear; */
}

.item {
  box-sizing: border-box;
  position: relative;
  /* background: #aaa; */
  height: 100px;
  width: 400px;
  font-size: v-bind('data.fontSize');
  float: left;
  margin-left: 20px;
  /* animation-name: scroll; */
  animation: scroll 15s infinite linear;
  /* animation:  scroll  v-bind('data.animation['animation-duration']') v-bind('data.animation['animation-iteration-count']') v-bind('data.animation['animation-timing-function']'); */
  /* animation-name: v-bind('data.animation['animation-name']'); */
  /* animation-duration: v-bind('data.animation['animation-duration']');
  animation-iteration-count:  v-bind('data.animation['animation-iteration-count']');
  animation-timing-function: v-bind('data.animation['animation-timing-function']'); */
  /* animation-name: v-bind('data.animation.animationName');; */
  /* animation-duration: v-bind('data.animation.animationDuration');
  animation-iteration-count: v-bind('data.animation.animationIterationCount');
  animation-timing-function: v-bind('data.animation.animationTimingFunction');  */

  animation-duration: v-bind('data.animation.animationDuration');
  /* animation-iteration-count: infinite;
  animation-timing-function: linear;  */
  border: 1px solid #333;
  border-right: none;
  border-left: none;
  /* text-align: center; */
  /* animation-play-state: paused; */
}

/* .item:nth-of-type(2n) {
  background: #7d7d7d;
} */

.item:hover {
  color: black;
  height: 120px;
  width: 430px;
  float: left;
  position: relative;
  left: -2px;
  box-shadow: 0 0 15px 0 #000;
  margin: -11px auto;
  z-index: 5;
  box-shadow: -2px 5px 10px #000;
  background: #ffffff51;
  transition: background .2s, width .2s linear;
  animation-play-state: paused;
  -webkit-animation-play-state: paused;
  /* Safari 和 Chrome */
}

/* .item:hover::after {
  border-top: 1px dotted #333;
  font-family: verdana;
  font-size: 12px;
  content: "Click to go to this item";
  cursor: pointer;
} */

.shadowLayer {
  position: relative;
  top: -100%;
  margin-right: 40px;
  height: 100%;
  width: 400px;
  float: right;
  z-index: -2;
  box-shadow: -2px 5px 10px #000;
}

@keyframes scroll {

  /*item height mult by num of items*/
  0% {
    top: 0px;
  }

  100% {
    top: v-bind('data.scrollHeigth');
    /* top: -1800px; */
  }
}
</style>